<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>附近的人</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
</head>

<body class="bg-f8 pd50">
<style>
    [v-cloak] {
        display: none;
    }

    .yaoqingt {
        text-align: center;
        line-height: 20px;
        padding-bottom: 20px;
    }

    .dian {
        color: blue;
        background: blue;
    }

    .dian2 {
        color: red;
        background: red;
    }
</style>
<div v-cloak id="app">
    <div class="near_f">
        <div class="leidabody">
            <div class="leida">
                <!--                <img class="zuobiao" src="../image/zuobiao.png" alt="">-->
                <i class="icon iconfont icon-shizixian zuobiao"></i>
                <div class="leidasm">
                </div>
                <div class="listcan">
                    <div class="youhu" v-for="(item,index) in list" @click="goDetail(item.id)"
                         :style="{left: item.left + 'px',top: item.top + 'px'}">
                        <div class="dian" :class="{dian2:sex3=='2'}"></div>
                    </div>
                </div>
            </div>
            <div class="dingwei w100s">
                <div class="zzsz" v-if="!dingwei">
                    <p>开启手机GPS定位才可以约会哦</p>
                </div>
                <div v-if="!dingwei" @click="getrefresh" class="my_logout mt0 mb50">刷新</div>
                <div class="w100s" v-else>
                    <div class="w100s">
                        <div class="zzsz" v-if="list.length==0 && isyuehui">
                            <p>正在搜索中，请耐心等待...</p>
                        </div>
                        <div class="zzsz" v-if="!isyuehui">
                            <p>开启约会才能约会哦</p>
                        </div>
                        <div v-show="list.length!=0 && isyuehui" class="swiper-container" ref="goodSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide yaoqingt pb0" :id="item.id"
                                     v-for="(item,index) in list"
                                     :key="index">
                                    <div class="yaoqingt_img">
                                        <img v-if="isyuehui" :src="item.thumb|filtersImg" alt="">
                                        <img v-else src="../image/headimg.png" alt="">
                                    </div>
                                    <div class="juli">
                                        <img src="../image/zuobiao.png" alt="">
                                        <span>{{item.distance}}</span>
                                    </div>
                                    <div class="pingjialist pingjialist2 pingjialist3">
                                        <div class="pingjialistitem pingjialistitems">
                                            {{item.age}}岁
                                        </div>
                                        <div class="pingjialistitem pingjialistitems">
                                            {{item.job}}
                                        </div>
                                    </div>
                                    <!--                            <div class="yaoqing_but">-->
                                    <!--                                邀请Ta-->
                                    <!--                            </div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="!isyuehui" @click="yuehuiis" class="my_logout mt0 mb50">我要约会</div>
                    <div v-else @click="yuehuiis" class="my_logout mt0 mb50">取消约会</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="../aui/js/aui.js"></script>
<script src="../script/vue2.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script src="../script/swiper-3.3.1.min.js"></script>
<script type="text/javascript">
    apiready = function () {
        var vm = new Vue({
            el: "#app",
            data: {
                list: [],
                page: 1,
                bMap: '',
                isyuehui: false,
                goodVisibility: true,
                nonew: false,
                dingwei: true,
                count: 0,
                xuanran: false,
                sex3: '2',
            },
            mounted: function () {
                var that = this;
                var token = $api.getStorage('userInfo').token
                if (!isLogin) {
                    toLogin()
                } else {
                    this.getlocal()
                }
                that.getrefUserinfo()
                api.addEventListener({
                    name: 'yuehuisx'
                }, function (ret, err) {
                    that.shuaxin()
                    that.getrefUserinfo();
                });
            },
            methods: {
                shuaxin: function () {
                    var that = this;
                    that.list = []
                    this.page == 1
                    that.$nextTick(function () {
                        that.swipes()
                    });
                    this.getlocal()
                },
                dingweiclose: function () {
                    var that = this;
                    if (that.isyuehui) {
                        that.yuehuiis()
                    }
                    that.dingwei = false
                },
                goDetail: function (e) {
                    var that = this;
                    if (!that.isyuehui) {
                        api.toast({msg: '请开启约会', location: 'middle'});
                    } else {
                        api.openWin({
                            name: 'reg',
                            url: 'widget://html/appointment/yuehuidetail.html',
                            slidBackType: 'edge',
                            vScrollBarEnabled: false,
                            slidBackEnabled: false,
                            pageParam: {
                                id: e
                            }
                        })
                    }
                },
                // 约会开关
                yuehuiis: function () {
                    var that = this;
                    that.list = []
                    this.page = 1
                    if (!that.isyuehui) {
                        var bMap = api.require('bMap');
                        bMap.getLocationServices(function (ret, err) {
                            console.log(JSON.stringify(ret));
                            if (!ret.enable) {
                                api.toast({msg: '开启定位才可以约会哦', location: 'middle'});
                                return
                            } else {
                                that.setyuehui()
                            }
                        });
                    } else {
                        that.setyuehui()
                    }

                },
                setyuehui: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.onlocation,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                is_location: !that.isyuehui ? 1 : 0,
                            }
                        }
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            that.isyuehui = !that.isyuehui
                            // that.list[0].status = !that.list[0].status

                            if (that.isyuehui) {
                                console.log("开始获取数据");
                                if (that.list.length == 0) {
                                    that.getlocal()
                                }
                                api.sendEvent({
                                    name: 'getyuehui',
                                });
                            }
                            that.$nextTick(function () {
                                that.swipes()
                            });
                            api.toast({msg: ret.msg, location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
                // 获取定位数据
                getlocal: function () {
                    var that = this;
                    var bMap = api.require('bMap');
                    console.log("定位获取数据中");
                    if (api.systemType == "ios") {
                        api.startLocation({
                            accuracy: '100m',
                            filter: 1,
                            autoStop: true
                        }, function (ret, err) {
                            if (ret && ret.status) {
                                //获取位置信息成功
                                bMap.getLocationServices(function (ret, err) {
                                    console.log("定位未开启");
                                    console.log(JSON.stringify(ret));
                                    if (ret.authorizationStatus == 'denied' || ret.authorizationStatus == 'notDetermined') {
                                        that.dingweiclose()
                                        api.openFrame({
                                            name: 'location',
                                            url: 'widget://html/location.html',
                                            bgColor: "rgba(0,0,0,0.4)",
                                            rect: {
                                                x: 0,
                                                y: 0,
                                                w: 'auto',
                                                h: 'auto'
                                            }
                                        });
                                    } else {
                                        that.dingwei = true
                                        bMap.initMapSDK(function (ret) { //ios初始化
                                            console.log(JSON.stringify(ret));
                                            if (ret.status) {
                                                bMap.getLocation({ //定位
                                                    accuracy: '10m',
                                                    autoStop: true,
                                                    filter: 100
                                                }, function (ret, err) {
                                                    if (ret.status) {
                                                        that.lat = ret.lat;
                                                        that.lng = ret.lon;
                                                        that.getList(1)
                                                    } else {
                                                        that.getlocal()
                                                        // alert(err.msg);
                                                    }
                                                });
                                            } else {
                                                that.dingweiclose()
                                            }
                                        });
                                    }
                                });
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                    } else {
                        bMap.getLocationServices(function (ret, err) {
                            console.log(JSON.stringify(ret));
                            if (!ret.enable) {
                                that.dingweiclose()
                                api.openFrame({
                                    name: 'location',
                                    url: 'widget://html/location.html',
                                    bgColor: "rgba(0,0,0,0.4)",
                                    rect: {
                                        x: 0,
                                        y: 0,
                                        w: 'auto',
                                        h: 'auto'
                                    }
                                });

                            } else {
                                that.dingwei = true
                                bMap.getLocation({ //定位
                                    accuracy: '10m',
                                    autoStop: true,
                                    filter: 100
                                }, function (ret, err) {
                                    if (ret.status) {
                                        that.lat = ret.lat;
                                        that.lng = ret.lon;
                                        that.getList(1)
                                    } else {
                                        that.getlocal()
                                    }
                                });
                            }
                        });
                    }
                },
                onLoad2: function () {
                    // 异步更新数据
                    var that = this
                    if (that.finished) {
                        return
                    }
                    that.page++
                    setTimeout(function () {
                        that.getaccountlist2();
                    }, 500);
                },
                getrefUserinfo: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    api.ajax({
                        url: ajaxRoute.center,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.hideProgress();
                            that.isyuehui = res.data.onlocation
                            that.sex3 = res.data.gender
                            console.log(res.data.gender);
                            console.log("性别性别性别性别性别性别性别");

                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                getmakemeeting: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.makemeeting,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.toast({msg: '发布成功', location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                swipes: function () {
                    var that = this;
                    if (that.nonew) {
                        var swiper = new Swiper('.swiper-container', {
                            observer: true,
                            observeParents: true,
                            centeredSlides: true,
                            slidesPerView: 2,
                            spaceBetween: 10,
                            onClick: function (e) {
                                // alert('123')
                                that.goDetail(e.clickedSlide.attributes["id"].nodeValue)
                            },
                            onSlideChangeEnd: function (swiper) {
                                // that.getvoices()
                            },
                        });
                    } else {
                        var swiper = new Swiper('.swiper-container', {
                            observer: true,
                            observeParents: true,
                            centeredSlides: true,
                            slidesPerView: 2,
                            spaceBetween: 10,
                            onReachEnd: function (swiper) {
                                that.page++
                                that.getList()
                            },
                            onSlideChangeEnd: function (swiper) {
                                // that.getvoices()
                            },
                            onClick: function (e) {
                                that.goDetail(e.clickedSlide.attributes["id"].nodeValue)
                            }
                        });
                    }
                },
                // 声音
                getvoices: function () {
                    api.notification({
                        sound: 'default'
                    });
                },
                getList: function (type) {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.meetingnearby,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                lng: that.lng,
                                lat: that.lat,
                                page: that.page
                            }
                        }
                    }, function (res, err) {
                        console.log("附近人");
                        if (res.code == 1) {
                            console.log(JSON.stringify(res))
                            that.count = res.data.count
                            api.hideProgress();
                            if (type == 2) {
                                api.refreshHeaderLoadDone()
                            }
                            if (res.data.data.length == 0) {
                                // api.toast({msg: '暂无用户', location: 'middle'});
                                that.page--
                                that.nonew = true
                            }
                            var sss = that.list

                            for (var i = 0; i < res.data.data.length; i++) {
                                var k = {}
                                k.thumb = res.data.data[i].thumb
                                k.id = res.data.data[i].id
                                k.top = suiji(i + 1)
                                k.left = suiji(i + 1)
                                k.distance = res.data.data[i].distance
                                k.age = res.data.data[i].age
                                k.job = res.data.data[i].job
                                k.status = false
                                sss.push(k)
                            }
                            that.list = sss

                            if (that.list.length == 0) {
                                api.toast({msg: '搜索中，请耐心等待', location: 'middle'});
                            }

                            console.log("获取切换数据");
                            console.log(JSON.stringify(that.list));
                            console.log("获取切换数据2");
                            that.$nextTick(function () {
                                if (that.list.length < that.count) {
                                    that.swipes()
                                } else {
                                    if (!that.xuanran) {
                                        that.swipes()
                                        that.xuanran = !that.xuanran
                                    }
                                }
                            });
                            console.log(JSON.stringify(that.list));
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
            },
            filters: {
                filtersImg: function (img) {
                    var imgs = ajaxUrl + '/' + img
                    return imgs;
                },
            },
        })

        function suiji(s) {
            return Math.floor(Math.random() * 180) + (s * 20)
        }

    }
</script>
